import React, { ReactNode } from 'react';
import { Table } from 'antd';
import { connect } from 'dva';
import { columns } from './InquiryTableColumn';
import { mapStateToProps, ObjectType } from '../../../utils';
import style from './table.less';

interface StateType {
  pageSize: number;
}

class RiskInquiryTable extends React.PureComponent<ObjectType, StateType> {
  public state = {
    pageSize: 10, // 一页默认展示表格行数
  };

  public timer: number | undefined;

  public selectedRowKeys = [];

  /*
   * 表格列渲染数据拼接上操作列，主要是为了绑定操作列的事件
   * columns：Array 除了操作列外表格的列标题渲染信息
   * 返回值：Array 表格的列标题渲染信息
   * */
  plusOptionColumn = () => {
    // @ts-ignore
    const cols: ObjectType[] = [].concat(columns);
    const {
      showLockModal,
      showModifyLevelModal,
      risk: {
        formData: { displayMarks },
      },
    } = this.props;
    const optionColumn = {
      title: '操作',
      dataIndex: 'option',
      key: 'option',
      width: 150,
      fixed: 'right',
      render: (text: string, record: StateType) => (
        <div className={style.option}>
          <a onClick={() => showLockModal(record)}>锁定</a>
          <a onClick={() => showModifyLevelModal(record)}>修改层级</a>
        </div>
      ),
    };
    displayMarks.forEach((val: ObjectType) => {
      cols.push({
        title: val.text,
        dataIndex: val.name,
        key: val.name,
        width: 120,
        render: (text: string, record: StateType) => {
          const riskLevel = record[val.mark];
          return <span>等級－{riskLevel || 0}</span>;
        },
      });
    });
    cols.push(optionColumn);

    // @ts-ignore
    this.timer = setTimeout(() => {
      this.props.dispatch({
        type: 'risk/setUserListColumns',
        payload: cols,
      });
      clearTimeout(this.timer);
    }, 500);

    return cols;
  };

  // 表格全选框点击事件
  onSelectAllUserList = (selected: boolean, selectedRows: StateType) => {
    this.props.dispatch({
      type: 'risk/saveSelectedUserList',
      payload: selectedRows,
    });
  };

  /*
   * 表格行复选框的点击事件
   */
  onSelectUserListChange = (selectedRowKeys: StateType, selectedRows: StateType) => {
    this.props.dispatch({
      type: 'risk/saveSelectedUserList',
      payload: selectedRows,
    });
    // @ts-ignore
    this.selectedRowKeys = selectedRowKeys;
  };

  handleTableChange = (pagination: ObjectType) => {
    const { current, pageSize } = pagination;
    const {
      risk: { formData },
      dispatch,
    } = this.props;
    this.setState({
      pageSize,
    });
    this.handleGetUserList({ ...formData.inquiryCondition, page: current, size: pageSize });
    dispatch({
      type: 'risk/setPageSize',
      payload: {
        pageSize,
        current,
      },
    });
  };

  // 翻页查询查询用户风险名单
  handleGetUserList = (condition: ObjectType) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'risk/getUserRiskDataEffect',
      payload: condition,
    });
  };

  public render(): ReactNode {
    const { pageSize } = this.state;
    const {
      risk: {
        tableData: { userList, total, selectedUserList, current },
        formData: { displayMarks },
      },
    } = this.props;
    this.selectedRowKeys = selectedUserList.map((val: ObjectType) => val.id);
    const rowSelection = {
      selectedRowKeys: this.selectedRowKeys,
      // 选中项发生变化时的回调
      onChange: this.onSelectUserListChange,
      // fixed: true,
      // 用户手动选择/取消选择所有行的回调
      onSelectAll: this.onSelectAllUserList,
    };
    const tableWidth = (displayMarks.length + 1) * 120 + 900;
    return (
      <Table
        // @ts-ignore
        rowSelection={rowSelection}
        columns={this.plusOptionColumn()}
        dataSource={userList}
        rowKey={(record: ObjectType) => record.id}
        className={style.mainTable}
        onChange={this.handleTableChange}
        Bordered
        // @ts-ignore
        pagination={{
          total,
          pageSize,
          current,
          pageSizeOptions: ['10', '20', '50', '200', '500'],
          // onChange: this.onPaginationChange,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: () => `共 ${total}条记录 第 ${current} / ${Math.ceil(total / pageSize)}`,
        }}
        scroll={{ x: tableWidth, y: 800 }}
      />
    );
  }
}

export default connect(mapStateToProps)(RiskInquiryTable);
